import React from 'react'
import { useRoutes, NavLink, useNavigate } from 'react-router-dom'
// 导入路由表数组
import routes from './routes'
export default function App() {
    // 创建编程式导航对象
    /**
     * 语法：
     *  navigate(path[,config])
     * 编程式导航跳转和 NavLink Link差别
     * 1. 通过js跳转
     * 2. 可以写逻辑判断，在进行跳转
     * 
     */
    const navigate = useNavigate()
    return (
        <div>
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header">
                        <h2>React Router Demo</h2>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        <NavLink className="list-group-item" to="/about">About</NavLink>
                        <NavLink className="list-group-item" to="/home">Home</NavLink>
                        <button onClick={()=>{
                            // if(令牌合法) navigate('/about')
                            // else alert('你小子找死')

                            navigate('/about',{
                                replace:true  // true跳转并替换当前历史记录
                            })
                        }}>编程式导航跳转到About去</button>
                    </div>
                </div>
                <div className="col-xs-6">
                    {/* 一级路由展示区域 */}
                    {useRoutes(routes)}
                </div>
            </div>
        </div>
    )
}
